<template>
	<div class="wrap">
        <div class="section1">
          <img src="img/bigScreen/14.png" alt="" @click="home"/>
        </div>
        <div class="section2">
        	<div class="system" v-for="(item,index) in leftSystem" :key="index" @click="link(item.URL)">
        		<span >{{item.name}}</span>
        	</div>
        </div>
        <div class="section3">
        	<img src="img/bigScreen/12.png" alt="" />
        </div>
        <div class="section4">
        	<div class="system" v-for="(item,index) in rightSystem" :key="index"  @click="link(item.URL)">
        		<span >{{item.name}}</span>
        	</div>        	
        </div>
        <div class="section5">
        	<span>{{timer}}</span>
        </div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
               leftSystem:[{name:'油烟', URL:'http://172.16.1.202:8804/#/platform/lampblack'},
               {name:'污染源', URL:'http://172.16.1.202:8804/#/platform/contaminate'},
               {name:'放射源', URL:'http://172.16.1.202:8804/#/platform/radiate'},
               {name:'环境', URL:'http://172.16.1.202:8804/#/platform/environment'}],
               rightSystem:[{name:'工况', URL:'http://172.16.1.202:8804/#/platform/working'},
               {name:'运维', URL:'http://172.16.1.202:8804/#/platform/operation'},
               {name:'园区', URL:'http://172.16.1.202:8804/#/platform/garden'}],
               timer:null
			}
		},
		mounted() {
          this.init()
          let that=this
          setInterval(function(){
          	that.init()
          },1000)
		},
		methods: {
		  home(){
		  	this.$router.push({
		  		path:'/'
		  	})
		  },
		  link(url){
		  	window.location.href=url
		  },
		  checkTime(i){   
			if (i<10){
				i="0" + i;
			}   
			return i;
		  }, 
          init(){
			var today=new Date();//定义日期对象   
			var yyyy = today.getFullYear();//通过日期对象的getFullYear()方法返回年    
			var MM = today.getMonth()+1;//通过日期对象的getMonth()方法返回年    
			var dd = today.getDate();//通过日期对象的getDate()方法返回年     
			var hh=today.getHours();//通过日期对象的getHours方法返回小时   
			var mm=today.getMinutes();//通过日期对象的getMinutes方法返回分钟   
			var ss=today.getSeconds();//通过日期对象的getSeconds方法返回秒   
			// 如果分钟或小时的值小于10，则在其值前加0，比如如果时间是下午3点20分9秒的话，则显示15：20：09   
			MM=this.checkTime(MM);
			dd=this.checkTime(dd);
			mm=this.checkTime(mm);   
			ss=this.checkTime(ss);    
			var day; //用于保存星期（getDay()方法得到星期编号）
			if(today.getDay()==0)   day   =   "星期日 " 
			if(today.getDay()==1)   day   =   "星期一 " 
			if(today.getDay()==2)   day   =   "星期二 " 
			if(today.getDay()==3)   day   =   "星期三 " 
			if(today.getDay()==4)   day   =   "星期四 " 
			if(today.getDay()==5)   day   =   "星期五 " 
			if(today.getDay()==6)   day   =   "星期六 " 
			this.timer=yyyy+"-"+MM +"-"+ dd +" "+ day +" "+hh+":"+mm+":"+ss         	    
          }
		}
	}
</script>
<style lang="scss" scoped>
    *{box-sizing: border-box;}
    .wrap{width: 100%;height: 100%;display: flex;justify-content: space-between;}
    .section1{width: 8.5%;padding:0 20px;display: flex;align-items: center;justify-content: center;
      img{width: 100%;}
    }
    .section2{width: 30%;display: flex;align-items: center;
      .system{background: url(/img/bigScreen/07.png)no-repeat;width: 150px;height: 50px;cursor: pointer;
      background-size: 100% 100%;display: flex;align-items: center;justify-content: center;
        span{color: #fff;font-size: 20px;}
      }
      .system:hover{background: url(/img/bigScreen/08.png)no-repeat;background-size: 100% 100%;}
    }
    .section3{width: 25%;display: flex;align-items: center;justify-content: center;}
    .section4{width: 24%;display: flex;align-items: center;
      .system{background: url(/img/bigScreen/03.png)no-repeat;width: 150px;height: 50px;cursor: pointer;
      background-size: 100% 100%;display: flex;align-items: center;justify-content: center;
        span{color: #fff;font-size: 20px;}
      }
      .system:hover{background: url(/img/bigScreen/04.png)no-repeat;background-size: 100% 100%;}    
    }
    .section5{width: 12.5%;color: #fff;display: flex;align-items: center;justify-content: center;}
</style>